<template>
    <custom-page-box>
        <div class="header">
            <div class="title">
                <h4>{{ contenInfo.name }}</h4>
                <img v-if="contenInfo.state === 0" src="~@/assets/images/icon/awiat-appore.png" alt="" />
                <img v-if="contenInfo.state === 1" src="~@/assets/images/icon/daport-icon.png" alt="" />
                <img v-if="contenInfo.state === 2" src="~@/assets/images/icon/reject-icon.png" alt="" />
                <span
                    :class="{
                        await: contenInfo.state === 0,
                        success: contenInfo.state === 1,
                        reject: contenInfo.state === 2
                    }"
                >{{ contenInfo.state === 0 ? '待审核' : contenInfo.state === 1 ? '通过' : '驳回' }}</span>
                <span style="font-size: 14px; margin-left: 20px">{{
                    contenInfo.orgCategoryId === '4' ? '服务商认证' : '投资商认证'
                }}</span>
                <a-button
                    class="img-btn"
                    icon="container"
                    v-if="contenInfo.state === 1"
                    @click="showImg"
                >
                    查看合同
                </a-button>
            </div>
            <div class="btn" v-if="contenInfo.state === 0">
                <a-button @click="handleAdopt"> 审核通过 </a-button>
                <a-button @click="handleReject"> 审核驳回 </a-button>
            </div>
            <a-button
                v-else
                type="primary"
                @click="
                    () => {
                        $router.go(-1)
                    }
                "
            >
                返回
            </a-button>
        </div>
        <div class="content">
            <div class="content-left">
                <div class="top">
                    <h4 class="mode-name">认证信息</h4>
                    <div>
                        <span>企业名称：</span>
                        <p>{{ contenInfo.name }}</p>
                    </div>
                    <!-- <div>
                        <span>法人代表：</span>
                        <p>{{ contenInfo.legalPerson }}</p>
                    </div> -->
                    <div>
                        <span>营业期限：</span>
                        <p>
                            {{ Number(contenInfo.termType) === 2 ? '长期' : contenInfo.term }}
                        </p>
                    </div>
                    <div>
                        <span>认证注册手机号：</span>
                        <p>{{ contenInfo.mobileNumber }}</p>
                    </div>
                    <div>
                        <span>营业执照副本扫描件：</span>
                        <img
                            :src="$staticUrl + '/' + contenInfo.licensePicture"
                            alt=""
                            @click="lookImg(contenInfo.licensePicture)"
                        />
                    </div>
                    <div>
                        <span>营业执照注册号：</span>
                        <p>{{ contenInfo.licenseCode }}</p>
                    </div>
                    <!-- <div>
                        <span>法人身份证号：</span>
                        <p>{{ contenInfo.legalIdCode }}</p>
                    </div> -->
                    <div>
                        <span>认证类型：</span>
                        <p>
                            <!--                            {{ contenInfo.approveType === 1 ? '入驻' : '非入驻' }}-->
                            {{ contenInfo.orgCategoryId === '4'?'服务商认证':'投资商认证' }}
                        </p>
                    </div>
                    <!-- <div>
                        <span>身份证照：</span>
                        <img
                            :src="$staticUrl + '/' + contenInfo.legalIdPictureFront"
                            alt=""
                            @click="lookImg(contenInfo.legalIdPictureFront)"
                        />
                        <img
                            :src="$staticUrl + '/' + contenInfo.legalIdPictureBack"
                            alt=""
                            @click="lookImg(contenInfo.legalIdPictureBack)"
                        />
                    </div> -->
                </div>
                <div class="bottom">
                    <h4 class="mode-name">公司信息</h4>
                    <div>
                        <span>企业规模：</span>
                        <p>{{ companyInfo.scale }}</p>
                    </div>
                    <div>
                        <span>公司职位：</span>
                        <p>{{ companyInfo.position }}</p>
                    </div>
                    <div>
                        <span>人员规模：</span>
                        <p>{{ companyInfo.employeeScale }}</p>
                    </div>
                    <div>
                        <span>年收入情况：</span>
                        <p>{{ companyInfo.income }}</p>
                    </div>
                    <template v-if="contenInfo.orgCategoryId !== '4'">
                        <div>
                            <span>投资领域：</span>
                            <p>{{ companyInfo.investmentField }}</p>
                        </div>
                    </template>
                    <template v-else>
                        <div>
                            <span>专注领域：</span>
                            <p>{{ companyInfo.primaryBusinessTypeName }}</p>
                        </div>
                        <div>
                            <span>覆盖地域：</span>
                            <p>
                                {{ companyInfo.territory }}
                            </p>
                        </div>
                        <div>
                            <span>获客方式：</span>
                            <p>
                                {{ companyInfo.obtainCustomer }}
                            </p>
                        </div>
                    </template>
                </div>
            </div>
            <div class="content-right">
                <h4 class="mode-name">审核动态</h4>
                <ul>
                    <li v-for="(item, index) in contenInfo.auditList" :key="index">
                        <span>{{ item.createTime.substring(0, 10) }}</span>
                        <div>
                            <p>
                                <span class="title">{{ contenInfo.name }}</span>
                                <span
                                    class="state"
                                    :class="{
                                        tijiao: item.state === 0,
                                        success: item.state === 1,
                                        reject: item.state === 2,
                                        await: item.state === 3
                                    }"
                                >
                                    {{
                                        item.state === 0
                                            ? '提交审核'
                                            : item.state === 1
                                                ? '审核通过'
                                                : item.state === 2
                                                    ? ' 审核驳回'
                                                    : item.state === 3
                                                        ? '再次提交审核'
                                                        : ''
                                    }}
                                </span>
                            </p>
                            <h2 class="time">
                                <p>
                                    {{ [0, 3].includes(item.state) ? '提交人:' : '审核人:' }}&nbsp;{{ item.reviewer }}
                                </p>
                                <p>
                                    <img src="@/assets/images/icon/time-icon.png" alt="" />
                                    {{ item.createTime }}
                                </p>
                            </h2>
                            <p class="explain">
                                {{ item.auditContent }}
                                <span
                                    class="explain-btn"
                                    v-if="item.auditImgList && item.state !== 1"
                                    @click="showPicturesModal(item.auditImgList)"
                                >图片说明</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <a-modal class="imgModel" title="图片预览" :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
        <a-modal
            :title="handleRes ? '通过审核' : '审批驳回'"
            :visible="visible"
            @ok="handleOk"
            @cancel="handleModelCancel"
            class="reject-model"
        >
            <a-form :form="form" layout="horizontal" :key="renderKey">
                <a-form-item label="驳回原因" v-if="!handleRes">
                    <a-textarea
                        placeholder="请输入驳回原因"
                        :maxLength="200"
                        auto-size
                        v-decorator="[
                            'auditContent',
                            {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入驳回原因(200字以内)'
                                    }
                                ]
                            }
                        ]"
                    />
                </a-form-item>
                <a-form-item extra="支持扩展名：.jpg，.jpeg，.png，大小不超过6M，支持上传多张">
                    <span v-if="handleRes" class="ant-form-item-required"></span>
                    <a-upload
                        v-decorator="[
                            'upload',
                            {
                                getValueFromEvent: normFile,
                                rules: [
                                    {
                                        required: handleRes,
                                        message: '请上传图片'
                                    }
                                ]
                            }
                        ]"
                        :action="$staticUrl"
                        list-type="picture"
                        :data="uploadData"
                        :before-upload="beforeUpload"
                        :remove="handleRemove"
                        @change="handleChange"
                    >
                        <a-button v-if="fileList.length < 9">
                            <a-icon type="upload" />
                            {{ handleRes ? '上传合同照片' : '上传文件' }}
                        </a-button>
                    </a-upload>
                </a-form-item>
            </a-form>
        </a-modal>
    </custom-page-box>
</template>

<script>
import { getUUID } from '~/plugins/tools'

export default {
    name: 'ExamineDetail',
    data () {
        return {
            contenInfo: '',
            previewVisible: false,
            previewImage: '',
            visible: false,
            handleRes: false,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            uploadData: {
                signature: '',
                'x-cos-security-token': '',
                'Content-Type': '',
                key: '',
                dir: '',
                host: ''
            },
            fileList: [],
            typeList: ['image/jpeg', 'image/png', 'image/bmp'],
            path: '/company-certification/img/',
            sourceList: [],
            renderKey: 0,
            companyInfo: {}
        }
    },
    head () {
        return {
            title: '运营审核详情页'
        }
    },
    mounted () {
        this.getContent()
        this.getEnterDetail()
    },
    methods: {
        // 获取入住详情
        async getEnterDetail () {
            const res = await this.$ApiServer['company/enter/getDetail']({
                companyId: this.$route.params.id
            })
            if (res.code === 200) {
                this.companyInfo = res.data
            }
        },
        async getContent () {
            const res = await this.$ApiServer['company/detail']({
                companyId: this.$route.params.id
            })
            if (res.code === 200) {
                this.contenInfo = res.data
            }
        },
        showImg () {
            if (
                this.contenInfo.auditList &&
                this.contenInfo.auditList[0] &&
                this.contenInfo.auditList[0].auditImgList &&
                this.contenInfo.auditList[0].auditImgList.length
            ) {
                this.showPicturesModal(
                    this.contenInfo.auditList[0].auditImgList
                )
            } else {
                this.showPicturesModal([])
            }
        },
        showPicturesModal (urls) {
            this.$picturesModal({ urls })
        },
        lookImg (imgurl) {
            this.previewImage = this.$staticUrl + '/' + imgurl
            this.previewVisible = true
        },
        handleCancel () {
            this.previewVisible = false
        },
        handleAdopt () {
            this.handleRes = true
            this.visible = true
        },
        handleReject () {
            this.handleRes = false
            this.visible = true
        },
        handleOk (e) {
            this.form.validateFields(async (err, values) => {
                let auditImgList = []
                if (this.sourceList.length) {
                    auditImgList = this.sourceList.map(item => item.url)
                }
                if (!err) {
                    if (this.handleRes) {
                        const res = await this.$ApiServer['company/approve']({
                            companyId: [this.$route.params.id],
                            auditImgList: auditImgList || [],
                            state: 1
                        })
                        if (res.code === 200) {
                            this.$message.success('操作成功')
                            this.getContent()
                            this.visible = false
                        } else {
                            this.$message.error(res.message)
                        }
                    } else {
                        this.$ApiServer['company/approve']({
                            companyId: [this.$route.params.id],
                            state: 2,
                            auditContent: values.auditContent,
                            auditImgList: auditImgList || [],
                            approveType: 1
                        }).then((res) => {
                            if (res.code === 200) {
                                this.$message.success('操作成功')
                                this.getContent()
                                this.visible = false
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    }
                } else {
                    return false
                }
            })
        },
        handleModelCancel (e) {
            this.visible = false
            this.sourceList = []
            this.fileList = []
            this.form.resetFields()
            this.renderKey++
        },
        beforeUpload (file) {
            return new Promise((resolve, reject) => {
                if (!this.typeList.includes(file.type)) {
                    this.$message.error('上传图片格式不对!')
                    return false
                }
                const isLt6M = file.size / 1024 / 1024 < 6
                if (!isLt6M) {
                    this.$message.error('图片大小不能超过6M!')
                    return false
                }
                const _path = '/' + this.path + '/' + this.$service.dateFormatter('yyyy-MM-dd') + '/'
                this.$service
                    .getAuthor({ Method: 'POST', Pathname: '/' })
                    .then((info) => {
                        this.uploadData = {}
                        this.uploadData.signature = info.Authorization
                        this.uploadData['x-cos-security-token'] = info.XCosSecurityToken
                        this.uploadData['Content-Type'] = ''
                        this.uploadData.key = _path + getUUID() + '.' + file.name.replace(/,/g, '').split('.').pop()
                        this.uploadData.dir = this.path
                        this.uploadData.host = this.$staticUrl
                        resolve(true)
                    })
                    .catch((err) => {
                        return reject(new Error(err))
                    })
            })
        },
        handleChange ({ file, fileList }) {
            if (file.status === 'uploading') {
                return
            }
            if (file.status === 'done') {
                this.sourceList.push({
                    _id: file.uid,
                    url: this.uploadData.key
                })
                this.fileList = fileList
            }
        },
        handleRemove (file) {
            const index = this.sourceList.findIndex(item => item._id === file.uid)
            const num = this.fileList.findIndex(item => item.uid === file.uid)
            this.sourceList.splice(index, 1)
            this.fileList.splice(num, 1)
        },
        normFile (e) {
            if (Array.isArray(e)) {
                return e
            }
            return e && e.fileList
        }
    }
}
</script>

<style lang="less" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffff;
    padding: 0 20px;
    height: 50px;
    border-radius: 6px;
    .title {
        display: flex;
        align-items: center;
        h4 {
            margin-bottom: 0;
            font-size: 16px;
            color: #333333;
            margin-right: 10px;
            font-weight: bold;
        }
        img {
            width: 17px;
            height: 18px;
            margin-right: 10px;
        }
        span {
            font-size: 16px;
            &.await {
                color: #f3993c;
            }
            &.success {
                color: @primary-color;
            }
            &.reject {
                color: #fd5454;
            }
        }
    }
    .btn {
        button {
            color: #ffff;
            &.active,
            &:hover {
                border: none;
            }
            &:nth-child(1) {
                background-color: @adopt-color;
            }
            &:nth-child(2) {
                background-color: @reject-color;
                margin-left: 20px;
            }
        }
    }
    .img-btn {
        border-color: #009944;
        color: #009944;
        margin-left: 20px;
        height: 28px;
        width: 90px;
        padding: 0;
        ::v-deep {
            span {
                margin-left: 4px;
            }
        }
    }
}
.content {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
    height: calc(100% - 60px);
    .mode-name {
        height: 52px;
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #333333;
        position: relative;
        padding-left: 28px;
        border-bottom: 1px solid #f3f3f3;
        margin-bottom: 0;
        &::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 2px;
            height: 12px;
            background: @primary-color;
        }
    }
    &-left {
        width: 60%;
        overflow-y: auto;
        & > div {
            border-radius: 6px;
            background-color: #ffffff;
            padding-bottom: 60px;
            &.top {
                margin-bottom: 10px;
            }
            div {
                display: flex;
                margin-top: 20px;
                padding-left: 20px;
                & + div {
                    margin-top: 24px;
                }
                span {
                    font-size: 14px;
                    color: #2a2a2a;
                    width: 140px;
                    text-align: right;
                }
                p {
                    margin-left: 30px;
                    color: #2a2a2a;
                    font-size: 14px;
                }
                img {
                    margin-left: 30px;
                    width: 200px;
                    height: 140px;
                    border-radius: 4px;
                    background: rgba(0, 0, 0, 0);
                    cursor: pointer;
                    object-fit: cover;
                    & + img {
                        margin-left: 20px;
                    }
                }
            }
        }
    }
    &-right {
        width: calc(40% - 10px);
        padding-bottom: 30px;
        background-color: #ffffff;
        border-radius: 6px;
        overflow-y: auto;
        ul {
            margin-top: 30px;
            position: relative;
            margin-left: 30px;
            &::before {
                content: '';
                position: absolute;
                left: 100px;
                top: 0;
                width: 1px;
                height: 100%;
                background: #d4d4d4;
            }
            li {
                display: flex;
                & > span {
                    margin-right: 36px;
                }
                div {
                    width: calc(100% - 140px);
                    background: #f3f3f3;
                    border-radius: 4px;
                    padding: 10px;
                    position: relative;
                    flex-shrink: 0;
                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: -28px;
                        width: 16px;
                        height: 16px;
                        border: 3px solid @primary-color;
                        border-radius: 50%;
                        background: #ffffff;
                    }
                    .time {
                        margin-top: 10px;
                        & > p {
                            margin-bottom: 10px;
                            color: #999999;
                            font-size: 14px;
                            line-height: 1;
                        }
                        img {
                            width: 14px;
                            height: 14px;
                        }
                    }
                    p {
                        margin-bottom: 0;
                        .title {
                            color: #2a2a2a;
                            font-size: 14px;
                        }
                        .state {
                            border-radius: 4px;
                            height: 30px;
                            padding: 0 5px;
                            color: #ffffff;
                            &.tijiao {
                                background-color: @primary-color;
                            }
                            &.success {
                                background-color: @primary-color;
                            }
                            &.reject {
                                background-color: #fd5454;
                            }
                            &.await {
                                background-color: #f3993c;
                            }
                        }
                        &.explain {
                            color: #999999;
                            font-size: 14px;
                            line-height: 1;
                        }
                        .explain-btn {
                            padding: 0;
                            color: #fd5454;
                            height: 14px;
                            line-height: 14px;
                            cursor: pointer;
                        }
                    }
                }
                & + li {
                    margin-top: 72px;
                }
            }
        }
    }
}
</style>
